import React,{useState} from 'react'
import MoviesList from './components/MoviesList'
import ClickedTimer from './components/ClickedTimer'
import TimerInterval from './components/TimerInterval'
import StateHook from './components/StateHook'
import Demo from './components/Demo'
/**
 * 1、副作用：React中除了主作用之外就是副作用，React中的主作用是使用state/props来完成页面渲染的，常见的副作用如下
 * 1）向后端api发送网络请求
 * 2）完成定时器的操作
 * 3）使用location来完成本地存储的
 * 4）进行DOM的操作
 * 2、语法
 * useEffect(参数1，参数2)
 * 参数1：回调函数，完成具体的副作用功能代码
 * 参数2：数组,数组的形式不一样，将来的结果也不一样
 * 3、关于第2个参数的不同情况
 * 1）第二个参数是个[]，就相当于模拟类组件中componentDidMount
 * 2) 第二个参数是没有的，就相当于模拟类组件中componentDidMount和componentDidUpdate
 * 3）第二个参数是一个非空数组，它在模拟vue watch监听器
 * 4、useEffect第一个参数(回调函数)返回值
 * 模拟componentWillUnMount:资源的销毁工作
 */
export default function App() {
  const [show,setShow]=useState(true)
  return (
    <div>
      {/* <MoviesList></MoviesList> */}
      {/* <ClickedTimer></ClickedTimer> */}
      {
        show?<TimerInterval></TimerInterval>:<></>
      }
      <hr />
      <button onClick={()=>setShow(!show)}>switch</button>
      {/* <StateHook></StateHook>
      <hr />
      <Demo></Demo> */}
    </div>
  )
}
